  <!-- ........................表格组件使用........................... -->
<template>
  <div class="h3">
    <h3>表格</h3>
    <div>
      <a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 300 }" :pagination="pagination" @change="handleTableChange">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'operation'">
            <a>事件</a>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang='ts'>
import type { TableColumnsType } from "ant-design-vue";
import {reactive} from 'vue'
// 自定义分页器
let pagination =reactive({
    total:100,
    current:1,
    pageSize:10,
    showTotal: (total: any,range: any[]) => `${range[0]} - ${range[1]}共 ${total} 条数据`,
    showSizeChanger:true,
    pageSizeOptions: ['10', '20', '30'],
    onShowSizeChange:(_current: any, pageSize: any)=>pageSize = pageSize,
    hideOnSinglePage: false, // 只有一页时是否隐藏分页器
}) ;
const handleTableChange = (data: any, filters: any, sorter: any)=> {
    pagination.current =data.current
    pagination.pageSize = data.pageSize
    console.log(pagination)

};


// 表格数据
const columns: TableColumnsType = [
  {
    title: "Full Name",
    width: 100,
    dataIndex: "name",
    key: "name",
    fixed: "left",
  },
  { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
  { title: "Column 1", dataIndex: "address", key: "1", width: 150 },
  { title: "Column 2", dataIndex: "address", key: "2", width: 150 },
  { title: "Column 3", dataIndex: "address", key: "3", width: 150 },
  { title: "Column 4", dataIndex: "address", key: "4", width: 150 },
  { title: "Column 5", dataIndex: "address", key: "5", width: 150 },
  { title: "Column 6", dataIndex: "address", key: "6", width: 150 },
  { title: "Column 7", dataIndex: "address", key: "7", width: 150 },
  { title: "Column 8", dataIndex: "address", key: "8" },
  {
    title: "Action",
    key: "operation",
    fixed: "right",
    width: 100,
  },
];
interface DataItem {
  key: number;
  name: string;
  age: number;
  address: string;
}
const data: DataItem[] = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}
</script>

<style lang='less' scoped>

</style>